<!--
 * @Author: wzh
 个人中心
-->
<script setup>
import { getUserDataFn, setAvatarDataFn } from '@/api/wzhApi';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const user = ref('')
onMounted(() => {
	getUserDataFn({ userid: '10086' }).then(res => {
		user.value = res.data.userData
	})
})
// 跳转营销活动
function goCampaign() {
	router.push('/marketing')
}
// 遮罩层
const showBottom = ref(false)
// 上传文件
const avatar = ref()
const afterRead = (file) => {
	// 此时可以自行将文件上传至服务器
	// console.log(file.content);
	avatar.value = file.content
	showBottom.value = false
	setAvatarDataFn({ avatar: avatar.value }).then(res => {
		console.log(res);
		getUserDataFn({ userid: '10086' }).then(res => {
			user.value = res.data.userData
		})
	})
}
const fileList = ref()
</script>

<template>
	<header>
		<div class="top">
			<h1>个人中心</h1>
		</div>

		<div class="bottom">


			<van-image width="70" height="70" round @click="showBottom = true" :src="user.avatar" />
			<h1>{{ user.name }}</h1>
			<h3>{{ user.tel }}</h3>
		</div>
	</header>
	<van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '30%' }">
		<template #default>
			<div class='popup'>
				<span class="span-btn">取消</span>
				<div class="center">
					<van-uploader v-model="fileList" multiple :preview-image="false" :after-read="afterRead">
						<span class="top-upload">相册上传</span>
					</van-uploader>
					<span>拍照上传</span>
				</div>
			</div>
		</template>
	</van-popup>
	<main>
		<div class="top">
			<van-cell center @click="goCampaign">
				<template #icon>
					<van-icon class="iconfont icon-licheng1 search-icon" color="#4ea3fb" />
				</template>
				<template #title>
					<span>1314 <span style="color: gray; font-size: 0.12rem;padding-left: 0.1rem;">(公里)</span> </span>
				</template>
				<template #label>
					<span style="position: relative;left: -0.22rem;">兑换现金</span>
				</template>
				<template #right-icon>
					<van-icon name="arrow" style="color: gray;position: relative;bottom: -0.15rem;" />
				</template>
			</van-cell>
			<!-- @click="$router.push('/home/my/wallet')" -->
			<van-cell center :to="{ name: 'myWallet' }">
				<template #icon>
					<van-icon class="iconfont icon-qianbao search-icon" color="#db9e35" />
				</template>
				<template #title>
					<span>13.14 <span style="color: gray; font-size: 0.12rem;padding-left: 0.1rem;">(元)</span> </span>
				</template>
				<template #label>
					<span style="position: relative;left: -0.22rem;">我的钱包</span>
				</template>
				<template #right-icon>
					<van-icon name="arrow" style="color: gray;position: relative;bottom: -0.15rem;" />

				</template>
			</van-cell>

		</div>
		<div class="bottom">
			<van-cell is-link :to="{ name: 'message' }">
				<template #icon>
					<div>
						<van-icon class="iconfont icon-xiaoxi" color="#feb941" size="0.2rem" />
					</div>
				</template>
				<template #title>
					<span style="padding-left: 0.2rem;">消息</span>
				</template>
			</van-cell>
			<van-cell is-link @click="$router.push('/myorder')">
				<template #icon>
					<div>
						<van-icon class="iconfont icon-dingdan" color="#388bff" />
					</div>
				</template>
				<template #title>
					<span style="padding-left: 0.2rem;">我的订单</span>
				</template>
			</van-cell>
			<van-cell is-link @click="$router.push('/feedback')">
				<template #icon>
					<div>
						<van-icon class="iconfont icon-yijianfankui" color="#ff7f82" />
					</div>
				</template>
				<template #title>
					<span style="padding-left: 0.2rem;">意见反馈</span>
				</template>
			</van-cell>
			<van-cell icon="setting-o" is-link @click="$router.push('/setting')">
				<template #title>
					<span style="padding-left: 0.15rem;">设置</span>
				</template>
			</van-cell>

		</div>
	</main>

</template>
<style lang="scss" scoped>
body {
	font-size: 0.12rem;

}

.popup {
	.span-btn {
		display: block;
		position: absolute;
		top: 0.1rem;
		left: 0.1rem;
	}

	.center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;

		.top-upload {
			display: block;
			width: 100%;
			border-bottom: 0.01rem solid rgb(218, 216, 216);
			text-align: center;
			padding-bottom: 0.05rem;
			user-select: none;
		}
	}

	display: flex;
	justify-content: center;
	margin-top: 0.8rem;
	color: black;
	font-size: 0.14rem;
}

header {
	background-color: #1678ff;
	height: 35%;
	display: flex;
	flex-direction: column;
	justify-content: center;

	h1,
	h3 {
		color: white;
		margin: 0.05rem;
	}

	h1 {
		font-weight: normal;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

}

main {
	width: 100%;
	height: 60%;
	// flex: 1;
	background-color: #f1f2f3;
	padding-top: 5%;

	.top {
		width: 90%;
		height: 1rem;

		margin: 0 5%;
		box-sizing: border-box;
		padding-bottom: 0rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.search-icon {
			position: relative;
			top: -0.1rem;
			margin-right: 0.1rem;
		}

		.van-cell {
			height: 80%;
			width: 45%;
			border-radius: 0.1rem;
		}
	}

	.bottom {
		border-radius: 0.1rem;
		background-color: #ffffff;

		padding: 0 0.1rem;
		width: 90%;
		margin: 0 5%;
		box-sizing: border-box;
	}

}
</style>